
<html>
<body>
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
</head>
<body>
<title>Title</title>
<style type="text/css">
    span {
        color: red;
        font-size: 12px;
    }
</style>
<script type="text/javascript">
    window.onload = function () {
        //密码和确认密码一致
        //获取password2的span标签
        var password2ErrorSpan = document.getElementById("passwordError");
        //给确认密码文本框绑定blur事件,失去焦点验证
        var password2Elt = document.getElementById("newPassword2");
        password2Elt.onblur = function () {
            var password1 = document.getElementById("newPassword1").value;
            var password2 = document.getElementById("newPassword2").value;
            var password2RegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
            if (password2.length == 0) {
                password2ErrorSpan.innerText = "密码不能为空"
            } else if (password2 != password1) {
                password2ErrorSpan.innerText = "密码和确认密码不一致"
            } else if (!password2RegExp.test(password2)) {
                password2ErrorSpan.innerText = "密码至少由8-16个字符，至少1个大写字母，1个小写字母和1个数字";
            }
        }
        //给确认密码文本框绑定focus事件
        password2Elt.onfocus = function () {
            password2ErrorSpan.innerText = "";
        }

        //最终表单中所有项均合法方可提交
        //给提交按钮绑定鼠标单击事件
        var submitBtnElt = document.getElementById("submitBtn");
        submitBtnElt.onclick = function () {
            //触发username的blur事件
            password2Elt.focus();
            password2Elt.blur();
            //当所有表单项都合法的时候，提交表单
            if (password2ErrorSpan.innerText == "") {
                //获取表单对象
                var userFormElt = document.getElementById("userForm");
                //提交表单
                userFormElt.submit();
            }
        }
    }
</script>


<form id="userForm" action="/user/doLogin.jsp" method="post">
    <div style="
   width: 100%;
   display: flex;
   justify-content: center;
   overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
   ">
        <div style="background-color: #ffffff52;width: 30%;height: 100%;position: absolute;
    left: 0;box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);backdrop-filter: blur(50px); ">
            <div style="margin: 220px 60px 80px 60px">
                <div>

                    <input type="password" name="newPassword1" id="newPassword1" placeholder="请输入密码" style="width: 92.5%;
                    height: 50px;
                    border-radius: 50px;
                    padding-left: 27px;">
                    <span style="color: gray;font-size: 12px">* 至少8-16个字符，至少1个大写字母，1个小写字母和1个数字!</span><br><br>
                </div>
                <div>

                    <input type="password" name="newPassword2" id="newPassword2" placeholder="请确认密码" style="width: 92.5%;
                    height: 50px;
                    border-radius: 50px;
                    padding-left: 27px;">
                    <span id="passwordError"></span><br>
                </div>
                <div style="display: flex;justify-content: space-between;margin-top: 10px">
                    <input type="button" value="保存" id="submitBtn" style="width: 49%;
                    height: 50px;
                    border-radius: 50px;
                    background-color: white;">
                    <input type="reset" value="重置" style="    width: 49%;
                    height: 50px;
                    border-radius: 50px;
                    background-color: white;">
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 100%;overflow: hidden;">
            <img style="width: 100%;height: 100%" src="https://pic1.zhimg.com/70/v2-73aef8cfeee9878b2de33c68216d13f3_1440w.awebp?source=172ae18b&amp;biz_tag=Post">Post
        </div>
    </div>
</form>
<br>
<hr>





</body>
</body>
</html>
